<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>018_文字滚动</title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.con {
			width: 500px;
			height: 500px;
			border: 1px solid #000;
			margin: 100px auto;
			text-align: center;
			overflow: hidden;
		}
		.con .news li {
			list-style: none;
			text-indent: 20px;
			width: 100%;
			height: 50px;
			line-height: 50px;
		}
		.con .news li a {
			text-decoration: none;
			color: black;
		}
		.con .news li a:hover {
			color: orange;
		}
	</style>
	
	<body>
		<button>滚动一下</button>
		<div class="con">
			<ul class="news">
				<li><a href="#">发生了地方哈利大富豪1</a></li>
				<li><a href="#">发生了地方哈利大富豪2</a></li>
				<li><a href="#">发生了地方哈利大富豪3</a></li>
				<li><a href="#">发生了地方哈利大富豪4</a></li>
				<li><a href="#">发生了地方哈利大富豪5</a></li>
				<li><a href="#">发生了地方哈利大富豪6</a></li>
				<li><a href="#">发生了地方哈利大富豪7</a></li>
				<li><a href="#">发生了地方哈利大富豪8</a></li>
				<li><a href="#">发生了地方哈利大富豪9</a></li>
				<li><a href="#">发生了地方哈利大富豪10</a></li>
				<li><a href="#">发生了地方哈利大富豪11</a></li>
				<li><a href="#">发生了地方哈利大富豪12</a></li>
			</ul>
		</div>
		
		<script src="../js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			$(function() {
/*				$("button").bind("click",gun);*/
				setInterval("gun()",1000);
			});
			
			function gun() {
				$(".news").animate({"marginTop":"-50px"},400,function() {
					//将第一行的li添加到最后一行
					$(this).css("margin-top","0px").find("li:first").appendTo($(this));
				});
			}
			
		</script>
		
	</body>
</html>
